<template>
	<view class="article-info" v-if="isShow">
		<view class="title">
			{{articleData.title}}
		</view>
		<view class="author-and-time">
			<view class="text-holder">
				<view class="text">
					作者：{{articleData.author}}
				</view>
				<view class="text">
					时间：{{articleData.createTime}}
				</view>
			</view>
		</view>
		<view class="summary">
			概述：{{articleData.summary}}
		</view>
		<view class="img-holder">
			<image :src="articleData.coverImg" mode=""></image>
		</view>
		<view class="article-content">
			<view class="content-holder">
				<mp-html :content="articleData.content1" :tag-style="{img:'width:100%'}" />
			</view>
			<view class="rich-text">
				<mp-html :content="articleData.content2" :tag-style="{img:'width:100%'}" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		requestGetArticle
	} from 'api/find/find.js';
	export default {
		data() {
			return {
				id: '',
				articleData: {},
				isShow: false,
			}
		},

		methods: {
			getArticle() {
				requestGetArticle(this.id).then(res => {
					console.log(res);
					this.articleData = res.data.productArticle;
					this.isShow = true;
				})
			}
		},
		onShow() {
			this.getArticle()
		},
		onLoad(e) {
			this.id = e.articleId;
			console.log(e.articleId);
		},
	}
</script>


<style lang="scss" scoped>
	.article-info {
		box-sizing: border-box;
		padding: 60rpx;

		.title {
			font-size: 50rpx;
			font-weight: 700;
		}

		.author-and-time {
			width: 100%;
			overflow: hidden;

			.text-holder {
				float: right;
				font-size: 32rpx;
			}
		}

		.summary {
			margin: 32rpx 0;
			width: 100%;
			font-size: 32rpx;
		}

		image {
			width: 100%;
		}

		.article-content {
			.content-holder {
				/deep/ img {
					display: block;
					width: 630rpx;
				}
				/deep/ image {
					display: block;
					width: 100rpx;
				}
			}
		}

	}
</style>
